Node / reticulum_mirror / MeshChatX / files / meshchatx / src / frontend / components / map / internal / MapExportConfigPanel.vue

Displaying Raw • Download

T8b949e<!-- SPDX-License-Identifier: 0BSD -->

Tff7b72<templateTff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"absolute top-4 left-1/2 -translate-x-1/2 z-20 w-80 bg-white dark:bg-zinc-900 rounded-xl shadow-2xl border border-gray-200 dark:border-zinc-800 overflow-hidden text-gray-900 dark:text-zinc-100"

Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"p-4 border-b border-gray-200 dark:border-zinc-800 flex items-center justify-between"Tff7b72>

Tff7b72<h3 Te6edf3class=Ta5d6ff"font-semibold text-gray-900 dark:text-zinc-100"Tff7b72>Tff7b72{{ $Te6edf3tTff7b72(Ta5d6ff"map.export_area"Tff7b72) Tff7b72}}Tff7b72</h3>

Tff7b72<button Te6edf3class=Ta5d6ff"text-gray-500 hover:text-gray-700 dark:hover:text-zinc-300" @Te6edf3click=Ta5d6ff"$emit('cancel')"Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"close" Te6edf3class=Ta5d6ff"size-5" Tff7b72/>

Tff7b72</button>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"p-4 space-y-4"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"grid grid-cols-2 gap-4"Tff7b72>

Tff7b72<divTff7b72>

Tff7b72<label Te6edf3class=Ta5d6ff"block text-xs font-bold text-gray-500 uppercase mb-1"Tff7b72>Tff7b72{{ $Te6edf3tTff7b72(Ta5d6ff"map.min_zoom"Tff7b72) Tff7b72}}Tff7b72</label>

Tff7b72<input

Te6edf3:value=Ta5d6ff"minZoom"

Te6edf3type=Ta5d6ff"number"

Te6edf3min=Ta5d6ff"0"

Te6edf3max=Ta5d6ff"20"

Te6edf3class=Ta5d6ff"w-full bg-gray-50 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-700 rounded-lg px-3 py-2 text-sm dark:text-zinc-100"

@Te6edf3input=Ta5d6ff"$emit('update:minZoom', Number($event.target.value))"

Tff7b72/>

Tff7b72</div>

Tff7b72<divTff7b72>

Tff7b72<label Te6edf3class=Ta5d6ff"block text-xs font-bold text-gray-500 uppercase mb-1"Tff7b72>Tff7b72{{ $Te6edf3tTff7b72(Ta5d6ff"map.max_zoom"Tff7b72) Tff7b72}}Tff7b72</label>

Tff7b72<input

Te6edf3:value=Ta5d6ff"maxZoom"

Te6edf3type=Ta5d6ff"number"

Te6edf3min=Ta5d6ff"0"

Te6edf3max=Ta5d6ff"20"

Te6edf3class=Ta5d6ff"w-full bg-gray-50 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-700 rounded-lg px-3 py-2 text-sm dark:text-zinc-100"

@Te6edf3input=Ta5d6ff"$emit('update:maxZoom', Number($event.target.value))"

Tff7b72/>

Tff7b72</div>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"flex justify-between items-center text-sm"Tff7b72>

Tff7b72<span Te6edf3class=Ta5d6ff"text-gray-600 dark:text-zinc-400"Tff7b72>Tff7b72{{ $Te6edf3tTff7b72(Ta5d6ff"map.tile_count"Tff7b72) Tff7b72}}:Tff7b72</span>

Tff7b72<span Te6edf3class=Ta5d6ff"font-bold text-blue-600"Tff7b72>Tff7b72{{ Te6edf3estimatedTiles Tff7b72}}Tff7b72</span>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"flex gap-2"Tff7b72>

Tff7b72<button

Te6edf3:disabled=Ta5d6ff"exporting"

Te6edf3class=Ta5d6ff"flex-1 py-2 bg-gray-200 hover:bg-gray-300 dark:bg-zinc-700 dark:hover:bg-zinc-600 disabled:bg-gray-100 dark:disabled:bg-zinc-800 text-gray-900 dark:text-zinc-100 rounded-lg font-bold transition-colors"

@Te6edf3click=Ta5d6ff"$emit('cancel')"

Tff7b72>

Tff7b72{{ $Te6edf3tTff7b72(Ta5d6ff"common.cancel"Tff7b72) Tff7b72}}

Tff7b72</button>

Tff7b72<button

Te6edf3:disabled=Ta5d6ff"exporting"

Te6edf3class=Ta5d6ff"flex-1 py-2 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 text-white rounded-lg font-bold transition-colors shadow-md"

@Te6edf3click=Ta5d6ff"$emit('start')"

Tff7b72>

Tff7b72{{ $Te6edf3tTff7b72(Ta5d6ff"map.start_export"Tff7b72) Tff7b72}}

Tff7b72</button>

Tff7b72</div>

Tff7b72</div>

Tff7b72</div>

Tff7b72</template>

Tff7b72<scriptTff7b72>

import MaterialDesignIcon from "../../MaterialDesignIcon.vue";

export default {

name: "MapExportConfigPanel",

components: { MaterialDesignIcon },

props: {

minZoom: { type: Number, required: true },

maxZoom: { type: Number, required: true },

estimatedTiles: { type: [Number, String], default: 0 },

exporting: { type: Boolean, default: false },

},

emits: ["cancel", "start", "update:minZoom", "update:maxZoom"],

};

Tff7b72</script>